<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./Vue.js"></script>
    <style>

    </style>
</head>

<body>
    <div class="div">
        <!-- @keyup.enter   用enter键就能发送  我们可以使用 v-on 指令 (简写为 @) -->
        <input type="text" v-model.lazy="center" @keyup.enter="addlist">
        <button type="button" @click="addlist" >发送</button>
        <ul>
            <li v-for="i,index in list">
                {{i}}
                <button type="button" @click="del(index)">删除</button>
            </li>
            <div v-if:class="list.length===0">已无内容....</div>
        </ul>
    </div>
    <script>
        // Vue 自动为 methods 中的方法绑定了永远指向组件实例的 this。
        // 这确保了方法在作为事件监听器或回调函数时始终保持正确的 this。
        // 你不应该在定义 methods 时使用箭头函数，因为箭头函数没有自己的 this 上下文。
        const obj = {
            data() {
                return {
                    center: "",
                    list: ['胡歌'],
                }
            },
            methods: {
                addlist() {
                    // console.log(this.center);
                    // console.log(this.list);
                    if (this.center !== '') {
                        this.list.push(this.center)
                        this.center = ''
                    }

                },
                del(index) {
                    this.list.splice(index, 1)
                },
            }
        }
        const app = Vue.createApp(obj).mount('.div')

    </script>
</body>

</html>